<html>
<head>
<script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/408/gjeegkdb/jquery.min.js">
	
</script>
<script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/408/gjeegkdb/bootstrap.min.js">
	
</script>
<script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/408/gjeegkdb/ace-extra.min.js">
	
</script>
<script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/408/gjeegkdb/ace.min.js">
	
</script>
<link rel="stylesheet" type="text/css" href="http://sandbox.runjs.cn/uploads/rs/408/gjeegkdb/bootstrap.min.css">
<!-- <link rel="stylesheet" type="text/css" href="http://198.74.61.72/themes/preview/ace/assets/css/font-awesome.min.css"> -->
<link rel="stylesheet" type="text/css" href="http://sandbox.runjs.cn/uploads/rs/408/gjeegkdb/ace.min.css">

<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

<script type="text/javascript" src="${contextPath}/lib/js/jquery-ui-1.10.2.min.js"></script>
<link href="${contextPath}/lib/css/bootstrap-combined.min.css" rel="stylesheet" media="screen">
<script type="text/javascript" src="${contextPath}/lib/js/bootstrap.min.js"></script>
<#include "/base/head.html">

</head>

<script>
	$(function() {
		var uploader = Qiniu.uploader({
			runtimes : 'html5,flash,html4', //上传模式,依次退化
			browse_button : 'uploadButton', //上传选择的点选按钮，**必需**
			//  uptoken_url: '${contextPath}/qiniu/getUpLoadToken?fileName=aaaa',            //Ajax请求upToken的Url，**强烈建议设置**（服务端提供）
			uptoken : '${uploadToken}', //若未指定uptoken_url,则必须指定 uptoken ,uptoken由其他程序生成
			//    unique_names: true, // 默认 false，key为文件名。若开启该选项，SDK为自动生成上传成功后的key（文件名）。
			//  save_key: true,   // 默认 false。若在服务端生成uptoken的上传策略中指定了 `sava_key`，则开启，SDK会忽略对key的处理
			domain : 'petdogexpert', //bucket 域名，下载资源时用到，**必需**
			get_new_uptoken : false, //设置上传文件的时候是否每次都重新获取新的token
			// container: 'container',           //上传区域DOM ID，默认是browser_button的父元素，
			max_file_size : '100mb', //最大文件体积限制
			flash_swf_url : '${contextPath}/lib/Moxie.swf', //引入flash,相对路径
			max_retries : 3, //上传失败最大重试次数
			dragdrop : true, //开启可拖曳上传
			drop_element : 'container', //拖曳上传区域元素的ID，拖曳文件或文件夹后可触发上传
			chunk_size : '4mb', //分块上传时，每片的体积
			auto_start : true, //选择文件后自动上传，若关闭需要自己绑定事件触发上传
			init : {
				'FilesAdded' : function(up, files) {
					plupload.each(files, function(file) {
						// 文件添加进队列后,处理相关的事情
					});
				},
				'BeforeUpload' : function(up, file) {
					// 每个文件上传前,处理相关的事情
				},
				'UploadProgress' : function(up, file) {
					// 每个文件上传时,处理相关的事情
				},
				'FileUploaded' : function(up, file, info) {

					var res = JSON.parse(info);

					BaseJs.ajax("${contextPath}/user/saveDogPic?picName=" + res.key, null, function() {
						updatePicContain();
						alert("上传成功");
					});

					console.log(res.key);
					// 每个文件上传成功后,处理相关的事情
					// 其中 info 是文件上传成功后，服务端返回的json，形式如
					// {
					//    "hash": "Fh8xVqod2MQ1mocfI4S4KpRL6D98",
					//    "key": "gogopher.jpg"
					//  }
					// 参考http://developer.qiniu.com/docs/v6/api/overview/up/response/simple-response.html

					// var domain = up.getOption('domain');
					// 
					// var sourceLink = domain + res.key; 获取上传成功后的文件的Url
				},
				'Error' : function(up, err, errTip) {
					//上传出错时,处理相关的事情
				},
				'UploadComplete' : function() {
					//队列文件处理完毕后,处理相关的事情
				},
				'Key' : function(up, file) {
					// 若想在前端对每个文件的key进行个性化处理，可以配置该函数
					// 该配置必须要在 unique_names: false , save_key: false 时才生效
					var key = "${fileName}";
					// do something with key here
					return key
				}
			}
		});

		function updatePicContain() {

			BaseJs.ajax("${contextPath}/user/getDogPic", null, function(rdata) {

				console.log(rdata);
				$("#picContain").html("");
				for ( var i in rdata.data) {
					$("#picContain").append('<img style="margin-right:10px" src="http://7xsvy6.com2.z0.glb.clouddn.com/'+rdata.data[i]+'" width="200" height="200" />')
				}

			});
		}

		updatePicContain();
	});
</script>

<body>

	<div class="container-fluid">
		<div class="row-fluid">
			<div class="span12">
				<div class="navbar">
					<div class="navbar-inner">
						<div class="container-fluid">
							<a class="btn btn-navbar" data-target=".navbar-responsive-collapse" data-toggle="collapse"></a> <a class="brand" href="#">宠物诊断</a>
							<ul class="nav pull-right">
								<li><a>${user.nickname} 你好 </a></li>
								<li class="divider-vertical"></li>
								<li><a href="${contextPath}/login/ss">退出登录</a></li>
							</ul>
						</div>
					</div>
				</div>
				<div class="row-fluid">
					<div class="span2">
						<div class="sidebar" id="sidebar">

							<!-- #sidebar-shortcuts -->

							<ul class="nav nav-list">
								<li class="active"><a href="index.html"> <i class="icon-dashboard"> </i> <span class="menu-text"> 主菜单 </span>
								</a></li>
								<li><a href="#" class="dropdown-toggle"> <i class="icon-desktop"> </i> <span class="menu-text"> 用户管理 </span> <b class="arrow icon-angle-down"> </b>
								</a>

									<ul class="submenu">
										<li><a href="/petdogexpert/web-cilent/management.html"> <i class="icon-double-angle-right"> </i> 用户信息
										</a></li>

										<li><a href="/petdogexpert/web-cilent/NewFile.html"> <i class="icon-double-angle-right"> </i> 宠物犬信息
										</a></li>
									</ul></li>

								<li><a href="#" class="dropdown-toggle"> <i class="icon-list"> </i> <span class="menu-text"> 诊断模块 </span> <b class="arrow icon-angle-down"> </b>
								</a>

									<ul class="submenu">
										<li><a href="/petdogexpert/web-cilent/diagnosis.html>
								<i class="icon-double-angle-right"> </i> 疾病诊断
										</a></li>

										<li><a href="jqgrid.html"> <i class="icon-double-angle-right"> </i> 疾病信息查询
										</a></li>
									</ul></li>
								<li><a href="gallery.html"> <i class="icon-picture"> </i> <span class="menu-text"> 问题反馈 </span>
								</a></li>
							</ul>
							<!-- /.nav-list -->

							<div class="sidebar-collapse" id="sidebar-collapse">
								<i class="icon-double-angle-left" data-icon1="icon-double-angle-left" data-icon2="icon-double-angle-right"> </i>
							</div>
						</div>
					</div>
					<div class="span6">
						<div class="header">

							<h1 class="page-title">宠物犬照片上传</h1>

							<ul class="breadcrumb" contenteditable="true" style="background-color: #FFFFFF;">
								<a href="/petdogexpert/web-cilent/containhtml.html">主菜单</a> /
								<a href="#">用户模块</a> / 宠物犬照片上传
							</ul>
						</div>
						<div>
							<button class="btn" type="button btn-info" id="uploadButton">上传图片</button>
						</div>
						<form id="petPhoto" method="post" action=""></form>

					</div>
					
				</div>
				<div id="picContain" style="margin:20px"></div>
</body>
</html>